<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>21.life_circle_function_basic</title>
</head>
<body>
<div id="app"></div>

<script src="lib/react.development.js"></script>
<script src="lib/react-dom.development.js"></script>
<script src="lib/babel.min.js"></script>

<script type="text/babel">

    class Demo extends React.Component{
        state ={opacity: 1}

        componentDidMount =()=>{
            console.log('---componentDidMount---');
            let  {opacity} = this.state;
            this.timer= setInterval(()=>{
                opacity -=0.1;
                if (opacity<=0) opacity=1;
                this.setState({opacity});

            },200)
        }
        die = ()=>{
            ReactDOM.unmountComponentAtNode(document.getElementById("app"))
        }

        componentWillUnmount = ()=>{
            clearInterval(this.timer);
        }
        render() {
            const  {opacity} = this.state;
            return (
                <div>
                    <h1 style={{opacity}}>hello react</h1>

                    <button onClick={this.die}>结束</button>
                </div>

            );
        }
    }

    ReactDOM.render(<Demo/>,document.getElementById("app"))

</script>
</body>
</html>